<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
{include file="system@block/layui" /}

<div id="box">
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="是否补录">
	   <el-radio v-model="form.is_repair" label="1">是</el-radio>
	   <el-radio v-model="form.is_repair" label="0">否</el-radio>
	 </el-form-item>
  <el-form-item label="会员">
     <el-select v-model="form.user_id" placeholder="请选择会员" filterable>
      <el-option v-for="item in users" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="房间">
     <el-select v-model="form.room_id" placeholder="请选择房间" filterable>
      <el-option v-for="item in rooms" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="顾问">
     <el-select v-model="form.adviser_id" placeholder="请选择顾问" filterable>
      <el-option v-for="item in advisers" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="美容师">
	<el-select v-model="form.technician_ids" multiple placeholder="请选择美容师" filterable>
		<el-option
		v-for="item in technicians"
		:key="item.id"
		:label="item.nick"
		:value="item.id">
		</el-option>
	</el-select>
  </el-form-item>
 <el-form-item label="预约时间">
    <el-date-picker
      v-model="form.appointment"
      type="datetime"

      placeholder="选择日期时间">
    </el-date-picker>
 </el-form-item>
  <el-form-item label="预约项目">
	<el-select v-model="form.project_ids" multiple placeholder="请选择预约项目" filterable>
		<el-option
		v-for="item in projects"
		:key="item.id"
		:label="item.name"
		:value="item.id">
		</el-option>
	</el-select>
  </el-form-item>
    <el-form-item label="收银">
     <el-select v-model="form.cashier_id" placeholder="请选择收银" filterable>
      <el-option v-for="item in cashiers" :label="item.nick" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
 <el-form-item label="备注">
<el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="form.remarks">
</el-input>
</el-form-item>

  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
  </el-form>
</div>

<script>
var vm = new Vue({
	el:'#box',
	data:{
		form:{
          	is_repair:'',
			user_id: '',
			room_id: '',
			adviser_id: '',
			cashier_id: '',
			technician_ids: '',
			appointment_time: '',
			project_ids: '',
			remarks: '',
			appointment:0,
		},
		users:{:json_encode($users)},
		rooms:{:json_encode($rooms)},
		advisers:{:json_encode($advisers)},
		technicians:{:json_encode($technicians)},
		projects:{:json_encode($projects)},
		cashiers:{:json_encode($cashiers)},
	},
    created(){
        var form = {:json_encode($formData)};
        console.log(form)
        var that = this;
        that.form.id = form.id;
        that.form.user_id = form.user_id;
		that.form.room_id = form.room_id;
		that.form.adviser_id = form.adviser_id;
		that.form.cashier_id = form.cashier_id;
		that.form.technician_ids = form.technician_ids.map(x => Number(x));
		that.form.appointment_time = form.appointment_time;
		that.form.project_ids = form.project_ids.map(x => Number(x));
		that.form.remarks = form.remarks;
		that.form.appointment = form.appointment;
      	that.form.is_repair = form.is_repair;

    },
	methods:{
		onSubmit:function(){
			// this.form.appointment_time.getTime()/1000;
            // console.log(this.form.appointment_time);
            // return;
			// this.form.appointment = this.form.appointment_time.getTime()/1000;
			var that = this;
			    axios.post('{:url('')}', this.form).then(function (response) {
	                if(response.data.status === true){
	                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	                    that.$message({
	                        type: 'success',
	                        message: response.data.message,
	                        onClose: function(){
	                            parent.layer.close(index); //再执行关闭
	                            // layer.close(layer.index);
	                            window.parent.location.reload();
	                        }
	                    })
	                }else{
	                    that.$message({
	                        type: 'error',
	                        message: response.data.message
	                    })
	                }
	            }).catch(function (error) {
	                that.$message({
	                        type: 'error',
	                        message: error
	                    })
	            });
		},
	},

});
</script>
